<template>
  <div>
    <form action="">
      <div v-if="!openid" class="weui-cells__title">使用手机注册</div>
      <div v-if="!!openid" class="weui-cells__title">请完善相关信息方便以后登录</div>
      <div class="weui-cells weui-cells_after-title">
        <div class="weui-cell">
          <div v-if="isWxAuth" class="weui-cell__hd">
            <div style="margin-right: 5px; vertical-align: middle; width: 20px;  height: 20px;">
              <open-data type="userAvatarUrl" lang="zh_CN"></open-data>
            </div>
          </div>
          <div v-if="isWxAuth" class="weui-cell__bd">
            <open-data type="userNickName" lang="zh_CN"></open-data>
          </div>
          <div v-if="!isWxAuth" class="weui-cell__bd">
            请授权使用微信昵称
          </div>
          <button v-if="!isWxAuth" size="mini" class="weui-cell__ft" open-type="getUserInfo" @getuserinfo="handleGetUserInfo" lang="zh_CN">点击授权</button>
          <button v-if="isWxAuth" size="mini" class="weui-cell__ft" open-type="openSetting" @opensetting="handleOpenSetting">授权设置</button>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__bd">
            <input v-model="phone" type="number" placeholder="手机号">
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__bd">
            <input v-model="password" type="password" placeholder="密码">
          </div>
        </div>
      </div>
      <button class="btn" type="primary" :loading="loading" @click="handleSignup">确定注册</button>
      <navigator url="/pages/login/main"><a class="btn" href="#">我有账号登录</a></navigator>
      <!-- <button class="btn" open-type="openSetting">授权设置</button> -->
      <div class="weui-loadmore weui-loadmore_line weui-loadmore_dot">
        <div class="weui-loadmore__tips weui-loadmore__tips_in-line weui-loadmore__tips_in-dot"></div>

      </div>

      <div v-if="!openid" class="weui-loadmore" @click="handleSignupWithWx">
        <div style="marign-botton: 3px;">
          <image :src="CDN + '/static/images/wx.png'" style="width: 64px; height: 64px;" />
        </div>
      </div>
      <div class="weui-loadmore__tips weui-loadmore__tips_in-line tips">使用微信登录&nbsp;&nbsp;&nbsp;&nbsp;</div>
    </form>
  </div>
</template>

<script>
import { isMobilePhone } from 'validator'

import SignupUserMutation from '@/graphql/SignupUserMutation.graphql'

export default {
  data () {
    return {
      openid: null,
      isWxAuth: false,
      name: '',
      phone: '',
      password: '',
      CDN: this.$CDN
    }
  },
  methods: {
    handleGetUserInfo (e) {
      // console.log(e.mp.detail.userInfo)
      this.name = e.mp.detail.userInfo.nickName
      this.isWxAuth = true
    },
    handleOpenSetting (e) {
      // console.log(e.mp.detail.authSetting)
      if (e.mp.detail.authSetting && e.mp.detail.authSetting['scope.userInfo']) {
        this.$promiseify('getUserInfo', {
          lang: 'zh_CN'
        })
          .then(result => {
            // console.log(result)
            this.name = result.userInfo.nickName

            this.isWxAuth = true
          })
          .catch(() => {
            // console.log(error)
            wx.showToast({
              icon: 'none',
              title: '获取微信用户名出错, 请重试'
            })
          })
      } else {
        this.isWxAuth = false
        wx.showToast({
          icon: 'none',
          title: '请授权使用微信昵称'
        })
      }
    },
    handleSignup () {
      if (!this.name) {
        wx.showToast({
          icon: 'none',
          title: '请授权使用微信昵称'
        })
        return false
      }
      if (!this.phone || !isMobilePhone(this.phone, 'zh-CN')) {
        wx.showToast({
          icon: 'none',
          title: '请输入正确的手机号码'
        })
        return false
      }
      if (!this.password || this.password.length < 6 || this.password.length > 20) {
        wx.showToast({
          icon: 'none',
          title: '请输入6-20位数密码'
        })
        return false
      }
      /* this.$apollo.mutate({
        mutation: SignupUserMutation,
        variables: {
          name: this.name,
          phone: this.phone,
          password: this.password,
          openid: this.openid
        }
      })
        .then(result => {
          // console.log(result)
          wx.setStorageSync('token', result.data.signup.token)
          wx.setStorageSync('user', result.data.signup.user)
          const url = `../index/main`
          wx.reLaunch({ url })
        })
        .catch(error => {
          // console.log(error)
          return false
        }) */

      this.$apollo.mutateLoading({
        mutation: SignupUserMutation,
        variables: {
          name: this.name,
          phone: this.phone,
          password: this.password,
          openid: this.openid
        }
      }, result => {
        // console.log(result)
        wx.setStorageSync('token', result.data.signup.token)
        wx.setStorageSync('user', result.data.signup.user)
        const url = `../index/main`
        wx.reLaunch({ url })
      }, () => {
        // console.log(error)
        wx.showToast({
          icon: 'none',
          title: '用户注册出错, 请重试'
        })
        return false
      })
    }
  },
  onLoad () {
    this.openid = this.$root.$mp.query.openid

    this.$promiseify('getSetting')
      .then(result => {
        // console.log(result)
        if (result.authSetting && result.authSetting['scope.userInfo']) {
          this.$promiseify('getUserInfo', {
            lang: 'zh_CN'
          })
            .then(result => {
              // console.log(result)
              this.name = result.userInfo.nickName

              this.isWxAuth = true
            })
            .catch(() => {
              // console.log(error)
              wx.showToast({
                icon: 'none',
                title: '获取微信用户名出错, 请重试'
              })
            })
        } else {
          /* this.$promiseify('openSetting')
            .then(result => {
              // console.log(result)
            })
            .catch(error => {
              // console.log(error)
            }) */
          wx.showToast({
            icon: 'none',
            title: '请授权使用微信昵称'
          })
        }
      })
      .catch(() => {
        // console.log(error)
        /* wx.showToast({
          icon: 'none',
          title: '获取微信用户设置出错, 请重试'
        }) */
      })
  }
}
</script>

<style>
.btn {
  margin-top: 10px;
  text-align: center;
}
.tips {
  width: 100%;
  font-size: 12px;
  text-align: center;
}
</style>
